import React, { Component } from 'react'
import "../style/index.less";
import GoBack from '@/components/TheGoBack'
import TheTable from "@/components/TheTable";
import ThePagination from '@/components/ThePagination'
import { apiGetBusinessWorkOrderDetails,apiGetWorkOrderLogList,apiGetEditWorkOrderStatus } from '@/request/businessWorkOrder'
import { Button, Image,Modal } from 'antd';


export default class Details extends Component {
  state = {
    storeInformation: [],
    quaInformation: [],
    legalInformation: [],
    columns: [
      {
        title: '操作人',
        dataIndex: 'operateName',
        key: 'operateName'
      },
      {
        title: '动作',
        dataIndex: 'operateType',
        key: 'operateType',
        render: (text,record) => {
          let label = ''
          switch (record.operateType) {
            case 'J':
              label = '解决'
              break;
            case 'G':
              label = '关闭'
              break;
            default:
              label = '返回值错误'
              break;
          }
          return label
        }
      },
      {
        title: '时间',
        dataIndex: 'operateTime',
        key: 'operateTime'
      },
    ],
    dataSource: [],
    settle: false,
    shut: true,
    reopen: true,
    forward: true,
    follow: true,
    overrule: true,
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
    isModalVisible: false,
    WorkStatus: '',
    doneStatus: ''
  }
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { id } = this.props.match.params
    //获取工单信息
    let res = await apiGetBusinessWorkOrderDetails({ workOrderId: id })
    if (res.data && res.code === 0) {
      let data = res.data
      // console.log(data)
      let storeInformation = [
        {
          title: '工单编号：',
          value: data.workOrderCode
        },
        {
          title: '标题：',
          value: data.workOrderTitle
        },
        {
          title: '内容：',
          value: [
            data.workOrderContent,
            // data.storeEnvironment.split(',').map(v => {
            //   return <Image src={v} width={80} height={80} />
            // })
          ]
        },
        {
          title: '优先级：',
          value: (data.priorityLevel === '1'?'非常紧急':(data.priorityLevel === '2'?'紧急':(data.priorityLevel === '3'?'一般':(data.priorityLevel === '4'?'紧急':'低')))),
        },
        {
          title: '发起人：',
          value: data.operateName
        },
        {
          title: '手机号：',
          value: data.launchMobile
        },
        {
          title: '受理人：',
          value: data.launchName
        },
        {
          title: '邮箱地址：',
          value: data.operateEmail
        },
        {
          title: '发起时间：',
          value: data.launchTime
        },
      ]
      switch (data.workOrderStatus) {
        case 'J':
          this.setState({
            settle: true,
            shut: false,
          })
          break;
        case 'G':
          this.setState({
            settle: true,
            reopen: true,
          })
          break;
        default:
          break;
      }
      this.setState({ storeInformation})
    }
    //工单操作日志
    const workOrderId = res.data.workOrderId
    const { pageData } = this.state
    let log = await apiGetWorkOrderLogList({ ...pageData,workOrderId})
    if (log.code === 0 && log.data) {
      // console.log(log.data)
      this.setState({
        dataSource: log.data,
        loading: false,
        pageData: {
          pageNo: log.pageNo,
          pageSize: log.pageSize
        },
        total: log.totalCount
      })
    } else {
      this.setState({
        loading: false
      })
    }
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    },
    () => {
      this.getData()
    })
  }
  //操作按钮
  edit = async(e) => {
    let label = ''
    switch (e) {
      case 'J':
        label = '解决'
        break;
      case 'G':
        label = '关闭'
        break;
      default:
        break;
    }
    this.setState({
      isModalVisible:true,
      WorkStatus: label,
      doneStatus: e
    })
  }
  printQrCode = async() => {
    const { id } = this.props.match.params
    const {doneStatus} = this.state
    // console.log(doneStatus,id)
    let res = await apiGetEditWorkOrderStatus({ id: id, operateType: doneStatus })
    if (res.code === 0) {
      this.setState({
        isModalVisible: false,
        shut: true,
      })
      this.getData()
    }
  }
  handleCancel = () => {
    this.setState({
      isModalVisible:false
    })
  };


  render() {
    const { storeInformation,isModalVisible,WorkStatus, dataSource,columns,settle, shut,reopen,forward,follow,overrule,pageData: { pageNo, pageSize }, total } = this.state
    return (
      <div className="settings-box">
        <GoBack title={'工单详情'} history={this.props.history} />
        <div className="title">工单信息</div>
        <div className="store-details-content">
          {
            storeInformation.map((v, i) => {
              return <div className='information-box' key={i}>
                <div>{v.title}</div>
                <div>{v.value}</div>
              </div>
            })
          } 
          <Button className='btn' type="primary" disabled={settle} onClick = {()=>this.edit('J')}>解决</Button>
          <Button className='btn' type="primary" disabled={shut} onClick = {()=>this.edit('G')}>关闭</Button>
          <Button className='btn' type="primary" disabled={reopen} >重新打开</Button>
          <Button className='btn' type="primary" disabled={forward} >转发</Button>
          <Button className='btn' type="primary" disabled={follow} >跟进</Button>
          <Button className='btn' type="primary" disabled={overrule} >驳回</Button>
          <Modal title="工单操作" visible={isModalVisible} onOk={this.printQrCode} onCancel={this.handleCancel}>
            <p>是否进行{WorkStatus}工单操作</p>
          </Modal>
        </div>
        <div className="title">操作日志</div>
        <div className="store-details-content">
          <TheTable columns={columns} dataSource={dataSource} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
      </div>
    )
  }
}
